<script setup>
import {
  OfficeBuilding,
  EditPen,
  Document,
  SwitchButton,
} from "@element-plus/icons-vue";
import { useUserStore, usePersistStore, useDeskStore } from "@/stores";
import { storeToRefs } from "pinia";
const userStore = useUserStore();
const persistStore = usePersistStore();
const deskStore = useDeskStore();
const { exit } = userStore;
const { userInfo } = storeToRefs(persistStore);
const { top } = storeToRefs(deskStore);
const { showTop, hiddenTop } = deskStore;
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside>
        <img src="@/assets/logo.jpg" alt="" />
        <el-menu
          active-text-color="#ffd04b"
          background-color="#232323"
          class="el-menu-vertical-demo"
          :default-active="$route.path"
          text-color="#fff"
          router
        >
          <el-menu-item index="/desk" @click="hiddenTop">
            <el-icon><OfficeBuilding /></el-icon>
            <span>信息概览</span>
          </el-menu-item>
          <el-menu-item index="/tobacco/manage" @click="showTop">
            <el-icon><Document /></el-icon>
            <span>原料信息</span>
          </el-menu-item>
          <el-menu-item index="/tobacco/extra" @click="showTop">
            <el-icon><Document /></el-icon>
            <span>备料信息</span>
          </el-menu-item>
          <el-menu-item
            index="/tobacco/short"
            v-if="userInfo.job === 1"
            @click="showTop"
          >
            <el-icon><Document /></el-icon>
            <span>缺料登记</span>
          </el-menu-item>
          <!-- <el-menu-item index="/tobacco/group"  @click="showTop">
            <el-icon><List /></el-icon>
            <span>叶组管理</span>
          </el-menu-item>
          <el-menu-item index="/user/manage" v-if="userInfo.job === 3" @click="showTop" >
            <el-icon><Document /></el-icon>
            <span>员工管理</span>
          </el-menu-item> -->
          <el-menu-item index="/user/password" @click="showTop">
            <el-icon><EditPen /></el-icon>
            <span>重置密码</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header v-show="top">
          <h4>
            欢迎:<span>{{ userInfo.name }}</span
            >祝您生活愉快~
          </h4>
          <el-button type="danger" @click="exit">
            <el-icon><SwitchButton /></el-icon><span>退出</span>
          </el-button>
        </el-header>
        <el-main>
          <Transition>
            <RouterView></RouterView>
          </Transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 1s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
.v-enter-to,
.v-leave-from {
  opacity: 1;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.el-aside {
  width: 2.75rem;
  background-color: #232323;
  height: 100vh;
}
.el-aside img {
  width: 100%;
}
.el-aside .el-menu {
  width: 95%;
  border: none;
  margin-top: .375rem
}
.el-menu .el-menu-item {
  width: 100%;
  font-size: .1875rem;
}
.el-header {
  height: .75rem;
  background-color: white;
  font-size: .25rem;
  line-height: .75rem;
  display: flex;
  justify-content: space-between;
}
.el-header h4 {
  font-weight: normal;
  margin-left: .25rem;
}
.el-header h4 span {
  font-weight: bold;
  margin-left: .125rem;
  margin-right: .625rem;
}
.el-button {
  width: 1rem;
  height: .4375rem;
  font-size: .1875rem;
  margin: .15rem 2.5rem;
}
</style>
